<template>
  <view>
    <!-- 1. 轮播图 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
      <swiper-item v-for="(item,i) in goodsInfo.pics" :key="i">
        <view class="swiper-item">
          <image :src="item.pics_big" mode="widthFix" @click="preview(i)"></image>
        </view>
      </swiper-item>
    </swiper>
    <!-- 2. 商品信息展示 -->
    <view class="goods-info-box">
      <!-- 2.1 价格区 -->
      <view class="goods-price" v-if="goodsInfo.goods_price">
        ￥{{goodsInfo.goods_price}}
      </view>
      <!-- 2.2 收藏区 -->
      <view class="goods-favi">
        <view class="goods-name" v-if="goodsInfo.goods_name">
          {{goodsInfo.goods_name}}
        </view>
        <view class="goods-item-favi">
          <uni-icons type="star" size="18"></uni-icons>
          <text>收藏</text>
        </view>

      </view>
      <!-- 2.3 运费区 -->
      <text class="yf">
        快递：免运费--{{cart.length}}
      </text>
    </view>
    <!-- 3. 广告 -->
    <rich-text :nodes="goodsInfo.goods_introduce"></rich-text>

    <!-- 商品导航组件 -->
    <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
      @buttonClick="buttonClick" class="goods-nav" />
  </view>
</template>

<script>
 import {mapState,mapMutations,mapGetters} from "vuex"

  export default {
    // 1. 在计算属性中引入state,getter (计算属性)
    computed:{
      ...mapState("m_cart",['cart']),
      ...mapGetters("m_cart",['total']),
    },
    // 2. 使用属性的监听器对total值进行监听,它的值就是"购物车"按钮上的info属性的值
    watch:{
      total:{
        handler(newV){
          const cart = this.options.find(x => x.text === "购物车")
          cart.info = newV
        },
         immediate: true,
      },
     
    },
    data() {
      return {
        // 商品详情对象
        goodsInfo: {},
        options: [{
          icon: 'shop',
          text: '店铺',
          infoBackgroundColor: '#007aff',
          infoColor: "red"
        }, {
          icon: 'cart',
          text: '购物车',
          info: 0
        }],
        buttonGroup: [{
            text: '加入购物车',
            backgroundColor: '#ff0000',
            color: '#fff'
          },
          {
            text: '立即购买',
            backgroundColor: '#ffa200',
            color: '#fff'
          }
        ]
      };
    },
    onLoad(options) {
      const goods_id = options.goods_id
      // 1. 获取商品详情列表
      this.getGoodsInfo(goods_id)
    },

    methods: {
      // 引入要访问的购物车中的方法
      ...mapMutations("m_cart",['addToCart']),
      // 1. 获取商品详情列表
      async getGoodsInfo(goods_id) {
        const {
          data: res
        } = await uni.$http.get("/api/public/v1/goods/detail?goods_id=" + goods_id)
        if (res.meta.status !== 200) return uni.$showMsg()
        this.goodsInfo = res.message
        this.goodsInfo.goods_introduce = this.goodsInfo.goods_introduce.replace(/<img /g,
          "<img style='display:block' ").replace(/webp/g, "jpg")
      },
      preview(i) {
        // 预览大图
        uni.previewImage({
          current: i,
          urls: this.goodsInfo.pics.map(m => m.pics_big)
        })
      },
      // 店铺/购物车：两个按钮
      onClick(e) {
       if(e.content.text == "购物车"){
         uni.switchTab({
           url: '/pages/cart/cart'
         })
       }
      },
      // 加入购物车/立即购买:两个按钮
      buttonClick(e) {
        console.log("e:",e)  
        if(e.content.text === "加入购物车"){
             // 2. 组织一个商品的信息对象
              const goods = {
                goods_id: this.goodsInfo.goods_id,       // 商品的Id
                goods_name: this.goodsInfo.goods_name,   // 商品的名称
                goods_price: this.goodsInfo.goods_price, // 商品的价格
                goods_count: 1,                           // 商品的数量
                goods_small_logo: this.goodsInfo.goods_small_logo, // 商品的图片
                goods_state: true                         // 商品的勾选状态
              }
          // 添加到购物车
          this.addToCart(goods)
        }
        
      },
      
    }
  }
</script>

<style lang="scss">
  swiper {
    height: 750rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .goods-info-box {
    display: flex;
    flex-direction: column;
    margin-left: 5px;

    .goods-price {
      color: #c00;
      font-weight: bold;
      margin-top: 15px;
    }

    .goods-favi {
      display: flex;

      .goods-name {

        font-size: 14px;
      }

      .goods-item-favi {
        display: flex;
        width: 120px;
        flex-direction: column;
        align-items: center;
        color: gray;
        font-size: 13px;
      }
    }

    .yf {
      color: gray;
      margin-top: 12px;
    }
  }

  .goods-nav {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
    width: 100%;
  }
</style>